<script setup lang="ts">
import { ref } from "vue";

defineProps({
  pageData: {
    type: Object,
    default: () => {
      return {
        pageNum: 1,
        pageSize: 15,
      };
    },
  },
  total: {
    type: Number,
    default: 0,
  },
});

const emits = defineEmits(["pageNoChange", "pageSizeChange"]);

const pageSizes = ref<number[]>([15, 30, 50, 100]);

const handlePageSizeChange = async (val: number) => {
  emits("pageSizeChange", val);
};
const handlePageNumChange = async (val: number) => {
  emits("pageNoChange", val);
};
</script>

<template>
  <el-pagination
    style="justify-content: center"
    :current-page="pageData.pageNum"
    :page-size="pageData.pageSize"
    :total="total"
    :small="true"
    :page-sizes="pageSizes"
    layout="total,sizes, prev, pager, next, jumper"
    @size-change="handlePageSizeChange"
    @current-change="handlePageNumChange"
  />
</template>

<style scoped lang="scss"></style>
